<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3 transform | scale </title>
    <style>

        /* 双伪元素清除浮动 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        /*移动盒子的位置： 定位 ｜ 盒子的外边距 ｜ 2d转换移动*/
        .tr {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: blue;
            /*transform: translate(100px, 100px);*/
        }

        .tra {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: paleturquoise;
            /* 水平垂直居中 */
            transform: translate(-50%, -50%);
        }

        .rotate-test {
            width: 100px;
            height: 100px;
            background-color: #d2dddd;
            /*border-radius: 50%;
            border: 5px solid cornflowerblue;*/
            transition: all 3s;
        }

        .rotate-test:hover {
            transform: rotate(360deg);
        }

        /*代码实现倒三角，鼠标放上去旋转*/
        .triangle {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }

        .triangle::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 15px;
            width: 12px;
            height: 12px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
        }

        .triangle:hover::after {
            transform: rotate(225deg);
            transition: all .2s;
        }

        /*旋转案例*/
        .transform-origin-one {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid #87e8de;
        }

        .transform-origin-one::before {
            display: block;
            content: "one exam";
            width: 100%;
            height: 100%;
            background-color: #8ce6b0;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all .5s;
        }

        .transform-origin-one:hover::before {
            transform-origin: left bottom;
            transform: rotate(0deg);
        }

        /*scale缩放*/
        .scale-test {
            width: 200px;
            height: 200px;
            background-color: #2baee9;
            transition: all 1s;
        }

        .scale-test:hover {
            transform: scale(0.5, 0.5);
        }

        .page ul li {
            float: left;
            width: 30px;
            height: 30px;
            margin: 10px;
            list-style: none;
            border: 1px solid #52c41a;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            cursor: pointer;
        }

        .page ul li:hover {
            transform: scale(1.2);
        }

        /*综合示例*/
        .all {
            width: 200px;
            height: 200px;
            background-color: #7dd4d2;
            transition: all 1s;
        }
        .all:hover {
            transform: translate(50px,50px) rotate(180deg) scale(0.7) ;
        }
    </style>
</head>
<body>

<div class="tr">
    <div class="tra"></div>
</div>

<div class="rotate-test">
</div>

<div class="triangle">
    <!--    倒三角css实现-->
</div>

<!--旋转案例-->
<div class="transform-origin-one">

</div>

<div class="scale-test">

</div>

<div class="clearfix page">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

<div class="all">

</div>

</body>
</html>